<template>
  <div class="container">
    <div class="header-box">
      <h3><span>任务管理</span></h3>
      <div class="form-box">
        <el-form :inline="true" :model="formInline" class="demo-form-inline" label-width="80px">
          <el-form-item label="任务编码">
            <el-input v-model="formInline.user" placeholder="请输入任务编码" size="mini"></el-input>
          </el-form-item>
          <el-form-item label="任务名称">
            <el-input v-model="formInline.user" placeholder="请输入任务名称" size="mini"></el-input>
          </el-form-item>
          <el-form-item label="内容体载">
            <el-select v-model="formInline.region" placeholder="全部" size="mini">
              <el-option label="区域一" value="shanghai"></el-option>
              <el-option label="区域二" value="beijing"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="创建时间">
            <el-date-picker size="mini"
                            v-model="value1"
                            type="daterange"
                            range-separator="至"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="状态">
            <el-select v-model="formInline.region" placeholder="全部" size="mini">
              <el-option label="区域一" value="shanghai"></el-option>
              <el-option label="区域二" value="beijing"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" size="mini" @click="">搜索</el-button>
            <el-button size="mini" @click="">重置</el-button>
          </el-form-item>
        </el-form>
      </div>

    </div>
    <div class="main-box">
      <div class="table-top">
        <el-button type="primary" size="mini" @click="dialogVisible=true">新建</el-button>
        <el-button size="mini">批量操作</el-button>
        <el-button size="mini" style="float: right;">导出</el-button>
      </div>
      <el-table :data="tableData" border stripe size="mini" style="width: 100%">
        <el-table-column prop="code" label="任务编码" align="center" width="100"></el-table-column>
        <el-table-column prop="name" label="任务名称" align="center" width="250"></el-table-column>
        <el-table-column prop="date" label="创建时间" align="center"></el-table-column>
        <el-table-column prop="type" label="任务状态" align="center"></el-table-column>
        <el-table-column prop="amount" label="任务数据量" align="center"></el-table-column>
        <el-table-column prop="date2" label="完成/暂停时间" align="center"></el-table-column>
        <el-table-column prop="execute" label="执行操作" align="center">
          <template slot-scope="scope">
                    <span class="play-box" v-if="scope.row.execute==1">
                        <img src="/play1.png"/>
                        <img src="/zhan2.png"/>
                        <img src="/ting2.png"/>
                    </span>
            <span class="play-box" v-if="scope.row.execute==2">
                        <img src="/play1.png"/>
                        <img src="/zhan2.png"/>
                        <img src="/ting2.png"/>
                    </span>
            <span class="play-box" v-if="scope.row.execute==3">
                        <img src="/play1.png"/>
                        <img src="/zhan2.png"/>
                        <img src="/ting2.png"/>
                    </span>
          </template>
        </el-table-column>
        <el-table-column prop="" label="操作" width="200" align="center">
          <template slot-scope="scope">
            <el-button size="mini" type="primary" @click="$router.push('/details')">查看</el-button>
            <el-button size="mini" @click="">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination background
                     @size-change=""
                     @current-change=""
                     :current-page="1"
                     :page-sizes="[10, 20, 30, 40]"
                     :page-size="10"
                     layout="total, sizes, prev, pager, next, jumper"
                     :total="5">
      </el-pagination>
    </div>
    <el-dialog title="新建任务" :visible.sync="dialogVisible" width="70%" top="5vh">
      <el-form :model="formInline" class="demo-form-inline" label-width="80px">
        <el-form-item label="任务名称">
          <el-input v-model="formInline.user" placeholder="请输入任务名称" size="mini" style="width: 300px;"></el-input>
        </el-form-item>
        <el-form-item label="添加数据">
          <el-tag type="info" size="small" style="margin-left: 10px;"><i class="el-icon-plus"></i></el-tag>
          <div class="go-rule" style="float:right;">
            <el-button type="link" @click="goRule">规则管理</el-button>
          </div>
        </el-form-item>
        <el-form-item label="规则设置">
          <div class="check-box">
            <p><span>检查数据元</span><span style="width: 300px;">检查项</span></p>
            <ul>
              <li><span>产品名称</span>
                <el-tag size="small" type="success" closable>值域校验</el-tag>
                <el-tag size="small" type="success" closable>空值校验</el-tag>
                <el-tag type="info" size="small"><i class="el-icon-plus"></i></el-tag>
              </li>
              <li><span>品种码</span>
                <el-tag size="small" type="success" closable>正则校验</el-tag>
                <el-tag size="small" type="success" closable>空值校验</el-tag>
                <el-tag size="small" type="success" closable>唯一性校验</el-tag>
                <el-tag type="info" size="small"><i class="el-icon-plus"></i></el-tag>
              </li>
              <li><span>产品码</span>
                <el-tag size="small" type="success" closable>正则校验</el-tag>
                <el-tag size="small" type="success" closable>空值校验</el-tag>
                <el-tag size="small" type="success" closable>唯一性校验</el-tag>
                <el-tag size="small" closable style="width: 150px;">产品品种码唯一性校验</el-tag>
                <el-tag size="small" closable>一物多码校验</el-tag>
                <el-tag type="info" size="small"><i class="el-icon-plus"></i></el-tag>
              </li>
              <li><span>品牌</span>
                <el-tag size="small" type="success" closable>值域校验</el-tag>
                <el-tag size="small" type="success" closable>空值校验</el-tag>
              </li>
              <li><span>生产厂家</span>
                <el-tag size="small" type="success" closable>值域校验</el-tag>
                <el-tag size="small" type="success" closable>空值校验</el-tag>
              </li>
              <li><span>规格型号</span>
                <el-tag size="small" type="success" closable>值域校验</el-tag>
                <el-tag size="small" type="success" closable>空值校验</el-tag>
              </li>
              <li><span>计量单位</span>
                <el-tag size="small" type="success" closable>值域校验</el-tag>
                <el-tag size="small" type="success" closable>空值校验</el-tag>
              </li>
              <li><span>参考号</span>
                <el-tag size="small" type="success" closable>正则校验</el-tag>
                <el-tag size="small" closable style="width: 110px;">映射关系校验</el-tag>
                <el-tag type="info" size="small"><i class="el-icon-plus"></i></el-tag>
              </li>
              <li><span>基准名称</span>
                <el-tag size="small" type="success" closable>正则校验</el-tag>
                <el-tag size="small" closable style="width: 140px;">基准名称一致性校验</el-tag>
                <el-tag type="info" size="small"><i class="el-icon-plus"></i></el-tag>
              </li>
              <li>
                <el-tag type="info" size="small" style="margin-left: 10px;"><i class="el-icon-plus"></i></el-tag>
              </li>
            </ul>
          </div>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
            <el-button size="mini" type="primary" @click="dialogVisible = false">提交</el-button>
            <el-button size="mini" @click="dialogVisible = false">返回</el-button>
        </span>
    </el-dialog>
  </div>
</template>

<script>
import {mapGetters} from 'vuex'

export default {
  name: 'index',
  data() {
    return {
      dialogVisible: false,
      currentPage4: 1,
      value1: '',
      formInline: {
        user: '',
        region: ''
      },
      tableData: [{
        code: 18,
        name: '军民通用物资质量分析',
        date: '2024-08-05',
        type: '完成',
        amount: 5,
        date2: '2024-08-08',
        execute: 1
      }, {
        code: 17,
        name: '京东商品数据质量分析',
        date: '2024-07-31',
        type: '完成',
        amount: 9,
        date2: '2024-08-02',
        execute: 2
      }, {
        code: 16,
        name: '商品条码数据质量分析',
        date: '2024-07-22',
        type: '完成',
        amount: 2,
        date2: '2024-07-24',
        execute: 2
      }, {
        code: 15,
        name: '自行采购品种产品数据质量分析',
        date: '2024-07-16',
        type: '完成',
        amount: 5,
        date2: '2024-07-19',
        execute: 1
      }, {
        code: 14,
        name: '集中采购',
        date: '2024-07-08',
        type: '完成',
        amount: 7,
        date2: '2024-07-12',
        execute: 2
      }]
    }
  },
  methods: {
    goRule() {
      this.$router.push("/ruleManage")
    }
  }
}
</script>
<style lang="scss">
.check-box ul li span.el-tag--info {
  width: 80px !important;
}

.el-dialog__body {
  padding-top: 10px;
}
</style>
<style lang="scss" scoped>
.play-box {
  img {
    display: inline-block;
    width: 15px;
    margin: 0 5px;
  }
}

.check-box {
  border: 1px solid #DCDFE6;

  p {
    width: 100%;
    margin: 0;
    background-color: #DCDFE6;

    span {
      display: inline-block;
      width: 110px;
      text-align: center;
    }
  }

  ul {
    padding: 0;

    li {
      display: block;

      span {
        display: inline-block;
        width: 110px;
        text-align: center;
        margin-right: 5px;
      }

    }
  }
}
</style>
